<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<div class="layout">
		<!-- 1.搜索框 -->
		<div class="jd_search">
			<a href="#" class="jd_logo"></a>
			<form action="" class="jd_searchMore">
				<input type="text" placeholder="请输入商品名称">
			</form>
			<a href="#" class="jd_login">登录</a>
		</div>
		<!-- 2.轮播图 -->
		<div class="jd_banner">
			<ul class="jd_bannerImg">
				<li><a href="javascript:;"><img src="./uploads/l1.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l2.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l3.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l4.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l5.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l6.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l7.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./uploads/l8.jpg" alt=""></a></li>
			</ul>
			<ul class="jd_dott">
				<li></li>
				<li></li>
				<li class="active"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<!-- 3.导航信息 -->
		<div class="jd_nav">
			<ul class="clearfix">
				<li><a href=""><img src="./images/nav_1.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_2.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_3.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_4.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_5.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_6.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_7.png" alt=""><p>商品分类</p></a></li>
				<li><a href=""><img src="./images/nav_8.png" alt=""><p>商品分类</p></a></li>
			</ul>
		</div>
		<!-- 4商品分类 -->
		<div class="jd_product">
			<div class="jd_product_items">
				<a href="#" ><img src="./uploads/cp1.jpg" alt=""></a>
				 <a href="#" class="b_left b_bottom"><img src="./uploads/cp2.jpg" alt=""></a>
				<a href="#" class="b_left b_bottom"><img src="./uploads/cp3.jpg" alt=""></a>
			</div>
		</div>

	</div>
</body>
<script>
	// 1.设置修改轮播图的页面结构
	var banner=document.querySelector(".jd_banner");

	var imgBox=banner.querySelector("ul:first-of-type");
	var first=imgBox.querySelector("li:first-of-type");
	var last=imgBox.querySelector("li:last-of-type");
	// 在图片容器尾插入原始的第一张图片
	imgBox.appendChild(first.cloneNode(true));
	// 在图片容器首插入原始最后一张图片
	imgBox.insertBefore(last.cloneNode(true),imgBox.firstChild);
	// 2.设置对应的样式
	// 2.1获取所有的li元素
	var lis=imgBox.querySelectorAll('li');
	var count=lis.length;
	// console.log(count);//一共8+2=10张了
	// 2.2获取banner父盒子的宽度
	var bannerWidth=banner.offsetWidth;
	// 2.3设置图片盒子的宽度
	// console.log(bannerWidth)
	imgBox.style.width=count*bannerWidth+"px";
	// 2.4设置每一个li(图片)元素的宽度等于父盒子的宽度
	for (var i = 0; i<count; i++) {
		lis[i].style.width=bannerWidth+"px";
	}
    /*定义图片索引：图片已经有一个宽度的默认偏移*/
	var index=1;
	// 3.设置默认的偏移
	imgBox.style.left=-bannerWidth+"px";

	// 4.当屏幕变化的时候，重新计算宽度
	window.onresize=function(){
		// 4.1.获取banner的宽度，覆盖全局的宽度值
		bannerWidth=banner.offsetWidth;
		imgBox.style.width=count*bannerWidth+"px";
		for (var i = 0; i < count; i++) {
			lis[i].style.width=bannerWidth+"px";
		}
		imgBox.style.left=-index*bannerWidth+"px";
	};

	var timerId;
	// 5.实现自动轮播
	var startTime=function(){
		timerId=setInterval(function(){
			// 5.1变换索引
			index++;
			// 5.2添加过渡效果
			imgBox.style.transition="left 0.5s ease-in-out";
			// 5.3设置偏移
			imgBox.style.left=(-index*bannerWidth)+"px";
			// 5.4判断是否到最后一张
			//让动画做完了0.5s即500毫秒 设置延时器 在进行判断
			setTimeout(function(){
			  if(index==count-1){
				// console.log(index);
				index=1;
				imgBox.style.transition="none";
				imgBox.style.left=(-index*bannerWidth)+"px";
			   }
			},500)
			
		},2000)
	}
	startTime();


</script>

</html>